<template>
  <view class="comment-list" :style="{'backgroundColor': bgColor}">
    <view class="comment-item" v-for="item in commentList" :key="item.id" @tap="commentClick(item)">
      <view class="title">
        为什么二手车市场会这么的普及？
      </view>
      <view class="img_view" v-if="item.type=='img'">
        <image src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
        <image src="https://cdn.uviewui.com/uview/album/2.jpg"></image>
        <image src="https://cdn.uviewui.com/uview/album/3.jpg"></image>
      </view>
      <view class="video_view" v-if="item.type=='video'">
        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="">

        </image>
        <view class="icon">
          <u-icon name="play-right" size="45" color="#Fff"></u-icon>
        </view>
      </view>
      <view class="bottom">
        <view class="item">
          新年出版社
        </view>
        <view class="item">
          5喜欢
        </view>
        <view class="item">
          20阅读
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    props: {
      bgColor: {
        type: String,
        default: '#F5F7FA'
      },
      commentList: {
        type: Array,
        default () {
          return [{
              id: 1,
              type: 'img',
            },
            {
              id: 2,
              type: 'img',
            },
            {
              id: 3,
              type: 'img',
            },
            {
              id: 4,
              type: 'video',
            },
            {
              id: 5,
              type: 'img',
            },
            {
              id: 6,
              type: 'video',
            },
            {
              id: 7,
              type: 'img',
            },
            {
              id: 8,
              type: 'img',
            },
            {
              id: 9,
              type: 'img',
            }
          ]
        }
      }
    },
    data() {
      return {

      };
    },
    methods: {
      //点击车评，去详情页面
      commentClick(item) {
        uni.navigateTo({
          url: `/pages/commentDetail/commentDetail?id=${item.id}&type=${item.type}`
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .comment-list {


    .comment-item {
      border-bottom: 1px solid #E6E6E6;

      .title {
        padding: 20upx 0 20upx;
        font-size: 28upx;
        font-weight: 800;
        color: #3e3e3e;
      }

      .img_view {
        display: flex;
        justify-content: space-between;

        image {
          width: 33%;
          height: 180upx;
        }
      }

      .video_view {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        image {
          width: 100%;
          height: 330upx;
          border-radius: 8upx;
        }

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .bottom {
        height: 80upx;
        line-height: 80upx;
        display: flex;
        font-size: 24upx;
        color: #999999;

        .item {
          padding-right: 15upx;
        }
      }
    }
  }
</style>
